<template>
    <div class="blog-container">
        <tab class="tab-bg"></tab>
        <div class="blog-wrapper base-width">
            <div class="left-content-wrapper">
                <Article :articleContent="articleContent"></Article>
                <comment :articleContent="articleContent" :articleId="articleId" />
                <ul class="commend-blog-wrapper">
                    <li class="title">相关推荐</li>
                    <li class="commend-blog-item" v-for="item in commandList" :key="item.name">
                        <div class="blog-title">
                            <p>{{item.title}}</p>
                            <span class="reading-num"><span class="iconfont">&#xe639;</span>{{item.reading}}</span>
                        </div>
                        <p class="blog-content">{{item.content}}</p>
                    </li>
                </ul>
            </div>
            <div class="right-content-wrapper">
                <commend-author></commend-author>
                <chat-list></chat-list>
                <div class="catalog-container" v-if="articleContent.tableOfContent">
                    <h1 class="catalog-title">文章目录</h1>
                    <div class="catalog-wrapper">
                        <div class="catalog">
                            <article-content :articleContent="articleContent.tableOfContent"></article-content>
                        </div>
                    </div>
                </div>
                <commend-blog></commend-blog>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import tab from '../../base/tab/tab'
    import Footer from '../../base/footer/Footer'
    import Article from '../../base/article/Article'
    import Comment from '../../base/comment/Comment'
    import CommendAuthor from '../../base/Commend-author/CommendAuthor'
    import ChatList from '../../base/chat-list/ChatList'
    import CommendBlog from '../../base/commend-blog/CommendBlog'
    import { getArticleContext, lookArticle } from "../../api/blog";
    import { ERROR_NO } from "../../util/config";
    import {messageMixin} from "../../common/js/mixin";
    import ArticleContent from "../../components/article-content/ArticleContent";
    export default {
        mixins: [messageMixin],
        data () {
            return {
                articleContent: {},
                articleId: '',
                commandList: [
                    {
                        url: 'https://blog.csdn.net/wuzhiwei549/article/details/105874226?spm=1001.2014.3001.5501',
                        title: 'Python实现用手机监控远程控制电脑',
                        content: '【计算机视觉处理5】阈值处理1、阈值处理阈值处理就是设定某个阈值，然后对大于阈值的像素或者小于阈值的像素统一处理的过程。比如下面这个简单的图像：每个格子表示一个像素，格子中的数字表示图片的像素值。如果设定阈值为8，那我们可以把图片分成两个区域，如下图：然后我们统一对绿色区域或者蓝色区域进行操作，这就是阈值处理了。我们通常的操作是将高于某一阈值的像素值处理为255，或者低于某一阈值的像素值处理为0。或者两者同时进行。',
                        reading: '459'
                    }, {
                        url: 'https://blog.csdn.net/ZackSock/article/details/116177092?spm=1001.2014.3001.5501',
                        title: '真香！Java 导出 Excel 表格竟变得如此简单优雅',
                        content: '技术选型能够实现「导入/导出 Excel」的第三方常用类库有 Apache poi、Java Excel（JXL）和阿里巴巴开源的 Easyexcel 等。这么多类库该怎么选呢？在这里小编给大家推荐阿里巴巴开源的「Easyexcel」。\t性能对比\tpoi 和 jxl 对内存的消耗很大，在处理大批量的数据时，容易造成内存溢出。比如处理一个 3M 的 Excel，poi 和 jxl 可能需...',
                        reading: '13590'
                    }, {
                        url: 'https://blog.csdn.net/weixin_44985880/article/details/116233461',
                        title: '五一加班也要看的Android数据库开发基础入门【附完整案例】',
                        content: '目录一、初识Android数据库二、表中数据的添加操作三、数据表中数据的删除1、删除数据表中的全部数据2、单条数据的删除四、数据表中单条数据指定值的修改五、数据表中数据的查找1、查找全部数据2、查询单条数据六、完整项目案例源码Hello，你好呀，我是灰小猿！一个超会写bug的程序猿！最近和大家分享了很多关于Python开发的相关文章，今天就换个口味，在这里和大家记录一下在Android开发中连接数据库并进行基本操作的相关内容。Android中的数据库使用和',
                        reading: '13590'
                    }, {
                        url: 'https://blog.csdn.net/weixin_44985880/article/details/116233461',
                        title: '美团图数据库平台建设及业务实践',
                        content: '总第442篇2021年 第012篇图数据结构，能够更好地表征现实世界。美团业务相对较复杂，存在比较多的图数据存储及多跳查询需求，亟需一种组件来对千总第441篇2021年 第011篇高质量模型的设计和更新迭代是当前 AI 生产开发的痛点和难点。',
                        reading: '23424'
                    },
                ]
            }
        },
        /*eslint no-extra-boolean-cast: "off"*/
        created () {
            const articleId = this.$route.query.articleId
            if (!articleId) {
                this.$router.push('/home')
                return
            }
            this.articleId = articleId
            this._getArticleContext(articleId)
            this._lookArticle(articleId)
        },
        methods: {
            _getArticleContext (id) {
                getArticleContext(id).then(res => {
                    console.log(res.data)
                    if (res.code === ERROR_NO) {
                      this.articleContent = res.data.articleContent
                      this.articleContent.oneComment.reverse()
                      return
                    }
                    this._messge({
                        message: res.message
                    })
                })
            },
            _lookArticle (id) {
                lookArticle(id).then(res => {
                    if (res.code !== ERROR_NO) {
                        this._messge({
                            message: res.message
                        })
                    }
                })
            }
        },
        components: {
            tab,
            Article,
            Comment,
            CommendAuthor,
            ChatList,
            CommendBlog,
            Footer,
            ArticleContent
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    @import "./src/common/scss/mixin";
   .blog-container {
       /deep/.tab-wrapper {
           position: relative;
           background: $bg-tab;
           opacity: 0.83;
       }
       .blog-wrapper {
           display: grid;
           grid-template-columns: 1064fr 357fr;
           grid-column-gap: 8px;
           margin-top: 3px;
           .left-content-wrapper {
               max-width: 1064px;
               margin-right: 8px;
               overflow: hidden;
               .commend-blog-wrapper {
                   margin: 8px 0;
                   border: 1px solid $border-color;
                   user-select: text;
                   li {
                       display: flex;
                       flex-direction: column;
                       justify-content: center;
                       line-height: 21px;
                       padding: 0 20px;
                       box-sizing: border-box;
                       cursor: pointer;
                       & + li {
                           border-top: 1px solid $border-color;
                       }
                   }
                   .title {
                       height: 35px;
                       line-height: 24px;
                       font-weight: 700;
                       color: $font-gray;
                       font-size: 16px;
                   }
                   .commend-blog-item {
                       padding-top: 5px;
                       padding-bottom: 5px;
                        .blog-title {
                            display: flex;
                            font-size: 14px;
                            .reading-num {
                                margin-left: auto;
                                font-size: 13px;
                                color: rgb(159, 159, 159);
                                .iconfont {
                                    margin-right: 4px;
                                }
                            }
                        }
                       .blog-content {
                           @include overflow-ell();
                           font-size: 13px;
                           color: rgb(159, 159, 159)
                       }
                   }
               }
           }
           .right-content-wrapper {
               max-width: 375px;
               .catalog-container {
                   margin-top: 8px;
                   border: 1px solid $border-color;
                   .catalog-title {
                       height: 43px;
                       line-height: 43px;
                       padding-left: 20px;
                       font-size: 14px;
                       font-weight: 500;
                       box-sizing: border-box;
                       background-color: #f3f3f3;
                   }
                   .catalog-wrapper {
                       display: flex;
                       align-items: center;
                       justify-self: center;
                       width: 100%;
                       min-height: 200px;
                       .catalog {
                           padding: 10px;
                           box-sizing: border-box;
                       }
                   }
               }
           }
       }
   }
</style>
